<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>
        fetch （翻译过来就有获取的意思） 可以帮我们和后端进行交互，是基于Promise方式调用的。
        但是底层不是ajax，另外的一种网络请求技术。


        https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch


        fetch 天生是promise 不需要自己封装。


    </p>
    <button id="btn">点击发送请求</button>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<!-- 引入一个 axios 工具库 全局暴露 axios 对象工具 -->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>

<script>

    // 点击btn 发送网络请求
    $('#btn').click(function () {
        let url = 'https://yw.52kfw.cn/api/news/flist?pageSize=100&cate_id=%E7%A7%91%E6%8A%80%E5%85%B4%E5%9B%BD';

        // console.log(fetch(url));

        fetch(url).then(response => {
            // 规定好的，必须对后端返回的数据调用json方法。前提后端返回的数据是json格式的。
            return response.json();
        }).then(data => {
            console.log(data);
        }).catch(error => {
            console.log(error);
        })



    })

</script>


</html>